<template>
	<view class="getPhone">
		<view class="bgMask"></view>
		<view class="cnt" @click.stop="closePhoneBox">
			<view class="askingBox">
				<view class="title f_32 fw_600 tc_1">请允许授权获取手机号</view>
				<view class="btns">
				    <view class="btn cancelBtn" @click.stop="closePhoneBox">取消</view>
				    <button class="btn okBtn tc_main" type="default" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber" @click.stop="">确认</button>
				  </view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"fr-get-phone",
		data() {
			return {
				
			};
		},
		methods: {
			closePhoneBox() {
				this.$emit('closePhoneBox')
			},
			decryptPhoneNumber(e) {
				if(!e.detail.encryptedData) {
					this.$tool.msg('您的微信未绑定手机号呢!')
					this.$emit('closePhoneBox')
				    return
				}
				uni.checkSession({
					success: () => {
						// 登陆状态正常
						if(e.detail.errMsg == 'getPhoneNumber:ok') {
							console.log('用户同意提供手机号')
							console.log(JSON.stringify(e.detail.encryptedData))
							console.log(JSON.stringify(e.detail.iv))
							let encryptedData = e.detail.encryptedData
							let iv = e.detail.iv
							// 手机保存成功后
							this.$emit('closePhoneBox')
						} else {
							console.log('用户拒绝提供手机号')
						}
					},
					fail: () => {
						// 登陆状态异常
					}
				})
			},
		},
	}
</script>

<style lang="scss">
page {
	width: 100%;
	height: 100%;
}
</style>
<style lang="scss">
.getPhone {
	width: 100%;
	height: 100%;
	.bgMask {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: #000;
		opacity: 0.7;
		z-index: 99999;
	}
	.cnt {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 999999;
		.askingBox {
			width: 480rpx;
			height: 270rpx;
			background-color: #fff;
			border-radius: 16rpx;
			position: fixed;
			top: calc(50% - 135rpx);
			left: calc(50% - 240rpx);
			z-index: 999999;
			color: #111;
			overflow: hidden;
			.title {
				width: 100%;
				height: 180rpx;
				line-height: 180rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 600;
				border-bottom: 2rpx solid #eee;
			}
			.btns {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				.cancelBtn {
					border-right: 2rpx solid #eee;
				}
				.btn {
					width: 50%;
					height: 90rpx;
					line-height: 90rpx;
					text-align: center;
					background-color: #fff;
					font-size: 32rpx;
				}
			}
		}
	}
}
</style>
